<template>
  <div class="header-container flex-box">
    <div class="header-left flex-box">
      <el-icon class="icon" size="20" @click="store.commit('collapseMenu')"><Operation /></el-icon>
      <ul class="flex-box">
        <li v-for="(item,index) in selectMenuList" :key="item.path" class="tab flex-box" :class="router.path==item.path?'active':''">
        <el-icon  size="12"><component :is="item.icon"></component></el-icon>
        <router-link class="text flex-box" :to="{path:item.path}">{{item.name}}</router-link>
        <el-icon  size="12" class="close" @click="closeTab(item,index)"><Close /></el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right">
      <el-dropdown @command="handleClick">
          <div class="el-dropdown-link flex-box ">
            <el-avatar
              :src='userInfo.avatar'
            />
            <p class="user-name ">{{userInfo.name}}</p>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="cancel">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';
import { useRoute, useRouter} from 'vue-router';
const userInfo= JSON.parse(localStorage.getItem('pz_userInfo'))
//当前路由信息
const router = useRouter();
const route = useRoute();
const store = useStore();
const selectMenuList=computed(()=>store.state.menu.selectMenuList)
const closeTab=(item,index)=>{
  store.commit('closeMenu',item)
  if(route.path!==item.path){
    return
  }
  const selectMenuData=selectMenuList.value
  if(index===selectMenuData.length){
    if(!selectMenuData.length){
      router.push('/')
    }else{
      router.push({path:selectMenuData[index-1].path})


    }
  }else{
    router.push({path:selectMenuData[index].path})
    
  }


  
}
const handleClick=(command)=>{
  if(command==='cancel'){
    localStorage.removeItem('pz_token')
    localStorage.removeItem('pz_userInfo')
    localStorage.removeItem('pz_v3pz')
    window.location.href=window.location.origin
  }


}

</script>

<style lang="less" scoped>
.flex-box{
  display: flex;
  align-items: center;
  height: 100%;

}
.header-container {
  justify-content: space-between;
  height: 100%;
  background-color: #fff;
  
  .header-left{
    height: 100%;
    .icon{
      width: 45px;
      height: 100%;

    }
    .icon:hover{
      background-color: #f5f5f5;
      cursor: pointer;
      
    }
    .tab{
      padding: 10px;
      height: 100%;
      .text{
        margin: 0 5px;
      }
      .close{
        visibility: hidden;
      }
    }
    .tab:hover{
     background-color: #f5f5f5; 
     .close{
       visibility: inherit;
       cursor: pointer;
       color: #000;
     }
    }
    
   
    
  }
  .header-right{
    .user-name{
      margin-left: 10px;;
      
    }
  }

  
}
a{
   height: 100%;
   color: #333;
   font-size: 15px;
}
.active{
  a{
    color: #409eff;
  }
  i{
    color: #409eff;
  }
  background-color: #f5f5f5;
}
</style>